import { Component, EventEmitter, Output } from '@angular/core';

import {ApesCheckboxComponent} from '@shared/apes/checkbox/index';

@Component({
  selector           : 'apes-checkbox-wrapper',
  preserveWhitespaces: false,
  template           : `
    <div class="apes-checkbox-group">
      <ng-content></ng-content>
    </div>
  `,
  host               : {
    '[class.apes-checkbox-group]': 'true'
  }
})
export class ApesCheckboxWrapperComponent {
  @Output() apesOnChange = new EventEmitter<string[]>();
  private checkboxList: ApesCheckboxComponent[] = [];

  addCheckbox(value: ApesCheckboxComponent): void {
    this.checkboxList.push(value);
  }

  removeCheckbox(value: ApesCheckboxComponent): void {
    this.checkboxList.splice(this.checkboxList.indexOf(value), 1);
  }

  outputValue(): string[] {
    const checkedList = this.checkboxList.filter(item => item.apesChecked);
    return checkedList.map(item => item.apesValue);
  }

  onChange(): void {
    this.apesOnChange.emit(this.outputValue());
  }
}
